<template>
	<ul class="list">
		<li class="item" v-for="item of letters" v-on:click="handleLetterChange" @touchstart="handleTounchStart"  :ref="item"
			@touchmove="handleTounchmove"
			@tounchend="handleTounchEnd"
		>{{item}}</li>
	</ul>
</template>

<script type="text/javascript">
	export default {
		name: 'CityAlphabet',
		props: {
			cities: Object,
		},
		data(){
			return {
				tounchStatus: false,
				startY: 0,
				timer: null
			}
		},
		updated () {
			this.startY = this.$refs['A'][0].offsetTop;
		},
		computed: {
			letters () {
				const letters = [];
				for(let i in this.cities) {
					letters.push(i);
				}
				return letters;
			},
		},
		methods: {
			handleLetterChange(e) {
				this.$emit('change',e.target.innerText);
				// console.log(e.target.innerText);
			},
			handleTounchStart () {
				this.tounchStatus = true
			},
			handleTounchmove (e) {
				if(this.tounchStatus) {
					if(this.timer) {
						clearTimeout(this.timer);
					}
					this.timer = setTimeout(()=> {
						const touchY = e.touches[0].clientY - 79 ;
						//updated做优化
						const index  = Math.floor((touchY - this.startY) / 20);
						// console.log(index);
						if(index >= 0 && index < this.letters.length) {
							this.$emit('change', this.letters[index]);
						}
					},16)
				}
				//函数节流
			},
			handleTounchEnd () {

			},
		}
	};
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.list
		display: flex
		flex-direction: column
		justify-content: center
		position: absolute
		top: 1.58rem
		right: 0
		bottom: 0
		width: .4rem
		.item 
			line-height: .4rem
			text-align: center
			color: $bgColor
</style>